<template>
    <div id="app">
        <img src="./assets/logo.png">
        <div>
            <el-button @click="startHacking">Start</el-button>
            {{counter}}
            {{fullName}}
            {{num1copy}}<p></p>
            {{textA}}
            <p>{{textC}}</p>
            <p>textPlus:{{textPlus}}</p>
        </div>
    </div>
</template>

<script>
    import {
        mapState,
        mapGetters,
        mapActions,
        mapMutations
    } from 'vuex'
    import state from "~/store/state/state";

    export default {
        methods: {
            startHacking() {
                this.$notify({
                    title: 'It works!',
                    type: 'success',
                    message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
                    duration: 5000
                })
            },
            ...mapActions(['updateNum1Async']),
            ...mapMutations(['a/updateText', 'updateText'])
        },
        mounted() {

            console.log("this['a/textPlus']:　　", this.textPlus)
            //修改
            let i = 1;
            // let i2=1
            setInterval(() => {
                this.$store.commit('uodateCount', i++)
            }, 1000)
            // setInterval(()=>{
            //     this.$store.commit('updateNum1',{
            //         num:i2++,
            //         num2:2,
            //     })
            // },2000)
            // this.$store.dispatch('updateNum1Async', {
            //     num: 200,
            //     time: 3000
            // })
            this.updateNum1Async({
                num: 200,
                time: 3000
            })
            this['a/updateText']('1123')
            this.updateText('41564')
            // this['a/textPlus']('1111')
        },
        computed: {
            //模块的使用
            // textA(){
            //     return this.$store.state.a.text
            //     // return this.$store.state.b.text 可以写到mapState里面
            // },


            // ...mapState(['count']),    //代替下面的
            // ...mapState({   //对象形式，改名字
            //     counter:'count'
            // }),
            //还可以
            ...mapState({   //对象形式，改名字
                counter: (state) => state.count,
                num1copy: (state) => state.num1,
                textA: (state) => state.a.text,
                textC: (state) => state.c.text
            }),

            // count(){
            //       return this.$store.state.count
            //   },

            ...mapGetters({
                'fullName':'fullName',
                'textPlus':'a/textPlus'
            }), //代替下面的
            // fullName(){
            //   return this.$store.getters.fullName
            // }
        },


    }
</script>

<style>
    #app {
        font-family: Helvetica, sans-serif;
        text-align: center;
    }
</style>
